<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>单页内容管理 Page Content Form</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/statics/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/statics/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/statics/wang/wangeditor.css}">
    <style type="text/css">
        html{
            background-color: #FFF;
        }
        .pic {
            margin-left: 130px;
        }

        .pic dl {
            float: left;
            position: relative;
        }

        .pic dl dd {
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: pointer;
            background: #666;
            color: #fff;
            padding: 2px;
        }

        .pic img {
            height: 100px;
            margin: 5px 0;
            margin-right: 5px;
        }
        textarea.richbox {
            height: 300px;
        }

    </style>
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-content" id="layuiadmin-form-content" style="padding: 0px 5px;">
    <div class="layui-tab" th:unless="${#strings.isEmpty(module.tabs)}">
        <ul class="layui-tab-title">
            <li th:each="t,tStat:${#strings.arraySplit(module.tabs,',')}" th:text="${t}" th:class="${tStat.first ? 'layui-this' : ''}">TAB</li>
        </ul>
        <div class="layui-tab-content" th:unless="${ #strings.isEmpty(module.tabs)}" >
            <div th:each="t,tStat:${#strings.arraySplit(module.tabs,',')}" th:class="${tStat.first ? 'layui-tab-item layui-show' : 'layui-tab-item'}">
                <div class="layui-form-item" th:if="${tStat.first}">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入名称或内容标题"
                               class="layui-input" th:value="${content.title}">
                    </div>
                </div>
                <div class="layui-form-item" th:each="field:${fields}" th:if="${field.tabName == t}">
                    <label class="layui-form-label" th:text="${field.title}"></label>
                    <div th:switch="${field.type}" class="layui-input-block">
                        <input th:case="input" type="text"
                               th:name="${field.name}"
                               th:lay-verify="${field.required==1}?required" autocomplete="off"
                               th:placeholder="${field.tip}" class="layui-input"
                               th:value="${valmap[field.name]}"/>
                        <textarea th:case="textarea"
                                  th:name="${field.name}"
                                  th:lay-verify="${field.required==1}?required"
                                  th:placeholder="${field.tip}" class="layui-textarea">
                            [[${valmap[field.name]}]]
                        </textarea>
                        <div th:case="picture">
                            <div class="layui-input-inline">
                                <input type="text"
                                       th:id="${field.name}"
                                       th:name="${field.name}"
                                       th:lay-verify="${field.required==1}?required" autocomplete="off"
                                       th:placeholder="${field.tip}" class="layui-input"
                                       th:value="${valmap[field.name]}"/>
                            </div>
                            <button type="button" class="layui-btn upload upload-pic" th:data-des="${field.name}">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <div class="pic pic_box" style="margin-left: 20px;">
                                <dl th:if="${valmap[field.name]}">
                                    <dt><img th:src="${valmap[field.name]}"
                                             th:data-url="${valmap[field.name]}"></dt>
                                    <dd name="deleteFile" th:data-url="${valmap[field.name]}" th:data-des="${field.name}">删除</dd>
                                </dl>
                            </div>
                        </div>
                        <div th:case="attachment">
                            <div class="layui-input-inline">
                                <input type="text"
                                       th:id="${field.name}"
                                       th:name="${field.name}"
                                       th:lay-verify="${field.required==1}?required" autocomplete="off"
                                       th:placeholder="${field.tip}" class="layui-input"
                                       th:value="${valmap[field.name]}"/>
                            </div>
                            <button type="button" class="layui-btn upload upload-file" th:data-des="${field.name}">
                                <i class="layui-icon">&#xe67c;</i>上传附件
                            </button>
                        </div>
                        <input th:case="datetime" type="text"
                               th:name="${field.name}" lay-verify="datetime" readonly
                               th:placeholder="${field.tip}" class="layui-input datetime"
                               th:value="${valmap[field.name]}?:${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd HH:mm:ss')}"/>
                        <textarea th:case="richbox"
                                  th:name="${field.name}"
                                  th:lay-verify="${field.required==1}?required"
                                  th:placeholder="${field.tip}" class="layui-textarea richbox">
                            [[${valmap[field.name]}]]
                        </textarea>
                        <div th:case="radiobox">
                            <input type="radio" th:name="${field.name}[]"
                                   th:each="v:${#strings.arraySplit(field.dvalues,',')}"
                                   th:title="${v}"
                                   th:value="${v}"
                                   th:checked="${v == valmap[field.name]}?'true' : 'false'"/>
                        </div>
                        <div th:case="checkbox">
                            <input type="checkbox" th:name="${field.name}[]"
                                   th:each="v:${#strings.arraySplit(field.dvalues,',')}"
                                   th:title="${v}"
                                   th:checked="${v == valmap[field.name]}?'true':'false'"/>
                        </div>
                        <select th:case="combobox"
                                th:name="${field.name}"
                                th:lay-verify="${field.required==1}?required" class="form-control input-sm" style="width:auto;">
                            <option th:if="${not #strings.isEmpty(field.tip)}" value="" th:text="${field.tip}"></option>
                            <option th:each="v:${#strings.arraySplit(field.dvalues,',')}"
                                    th:value="${v}"
                                    th:text="${v}"
                                    th:selected="${v == valmap[field.name]}?'true':'false'">
                            </option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" th:if="${tStat.first}">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="state" value="1" title="显示"
                               th:checked="${content.state == null || content.state ==1}?'true':'false'">
                        <input type="radio" name="state" value="0" title="隐藏"
                               th:checked="${content.state ==0}?'true':'false'">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="hidden" name="id" th:value="${content.id}"/>
            <input type="hidden" name="lang" th:value="${content.lang}"/>
            <input type="hidden" name="module" th:value="${content.module}"/>
            <button class="layui-btn" lay-submit lay-filter="LAY-page-add-submit" id="LAY-page-add-submit">提交</button>
        </div>
    </div>
</div>
    <script th:src="@{/statics/layui/layui.js}"></script>
    <script>
        layui.config({
            base: '/statics/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form','laydate', 'upload', 'wangeditor'], function () {
            var $ = layui.$
                , form = layui.form
                , laydate = layui.laydate
                , wang = layui.wangeditor('.richbox')
                , upload = layui.upload;

            wang.config.customUpload = false;
            wang.config.uploadImgUrl = '/cms/wangEditor/local/saveImg';
            wang.config.uploadImgFileName = 'file';
            wang.config.uploadImgFns.onload = function (resultText, xhr) {
                var obj = eval('(' + resultText + ')');
                wang.command(null, 'insertHtml', '<img src="' + obj.data + '" style="max-width:100%;"/>');
            };
            wang.create();

            laydate.render({
                elem: '.datetime'
                ,format: 'yyyy-MM-dd HH:mm:ss'
            });

            upload.render({
                elem: '.upload-file'
                , url: '/api/file/local/upload?type=files'
                , accept: 'file'
                , method: 'post'
                , multiple: false //多文件上传
                ,before: function(obj){
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    var item = this.item;
                    var des=$(item).data('des');
                    console.log(res.data);
                    layer.closeAll('loading'); //关闭loading
                    if(res.code==0){
                        $('#'+des).val(res.data);
                        layer.msg('上传成功！');
                    }else{
                        layer.msg('上传失败！');
                    }
                }
                ,error: function(){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg('上传发生错误！');
                }
            });

            upload.render({
                elem: '.upload-pic'
                , url: '/api/file/local/upload'
                , accept: 'images'
                , method: 'post'
                , multiple: false //多文件上传
                , acceptMime: 'image/*'
                ,before: function(obj){
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    var item = this.item;
                    var des=$(item).data('des');
                    console.log(des);
                    layer.closeAll('loading'); //关闭loading
                    if(res.code==0){
                        $('#'+des).val(res.data);
                        layer.msg('上传成功！');
                    }else{
                        layer.msg('上传失败！');
                    }
                }
                ,error: function(){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg('上传发生错误！');
                }
            });

            //选择模型切换模板
            form.on('select(model)', function(data){
                var elem = data.elem;
                var type = $(elem).find("option:selected").data('type');
                var listUrl = $(elem).find("option:selected").data('list-url');
                var infoUrl = $(elem).find("option:selected").data('info-url');

                $("#listUrl").val(listUrl);
                $("#infoUrl").val(infoUrl);
                form.render(null, 'layuiadmin-form-content');
            });

            $("dd[name='deleteFile']").on("click" , function(){
                var url = $(this).data('url');
                var des = $(this).data('des');
                var picbox = $(this).parent().parent();
                $.ajax({
                    url: '/api/file/local/remove?key=' + url,
                    method: 'DELETE',
                    contentType: "application/json;charset=UTF-8",
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg('文件已删除!', {icon: 1, time: 1000}, function () {
                                picbox.hide();
                                $('#'+des).val('');
                            });
                        } else {
                            layer.msg(res.msg);
                        }
                    },
                    error: function (err) {
                    }
                });
            });
        })
    </script>
</body>
</html>